import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/index.js'
import { Message } from '@arco-design/web-vue'

const routes = [
  {
    path: '/',
    component: () => import('@/views/layout/IndexPage.vue'),
    redirect: '/home',
    children: [
      {
        path: '/home',
        name: 'home',
        component: () => import('@/views/layout/HomePage.vue')
      },
      {
        path: '/user',
        component: () => import('@/views/user/UserPage.vue'),
        redirect: '/user/manager',
        children: [
          {
            path: '/user/manager',
            name: 'userManager',
            component: () => import('@/views/user/UserManagerPage.vue'),
            meta: {
              requiresAuth: true
            }
          },
          {
            path: '/user/online',
            name: 'userOnline',
            component: () => import('@/views/user/UserOnlinePage.vue'),
            meta: {
              requiresAuth: true
            }
          }
        ]
      },
      {
        path: '/question/:id',
        name: 'question',
        component: () => import('@/views/question/QuestionPage.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/question/manager',
        name: 'questionManager',
        component: () => import('@/views/question/QuestionManager.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/question/add',
        name: 'questionAdd',
        component: () => import('@/views/question/QuestionAddPage.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/question/edit/:id',
        name: 'questionEdit',
        component: () => import('@/views/question/QuestionEditPage.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/answer',
        name: 'answer',
        component: () => import('@/views/question/AnswerPage.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/answer/detail/:id',
        name: 'answerDetail',
        component: () => import('@/views/question/AnswerDetail.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/about',
        name: 'about',
        component: () => import('@/views/other/AboutPage.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('../views/login/LoginPage.vue')
  },
  {
    path: '/404',
    component: () => import('../views/other/404Page.vue')
  },
  {
    path: '/403',
    component: () => import('../views/other/403Page.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
})

router.beforeEach((to, from, next) => {
  // 检查是否需要进行认证
  const userStore = useUserStore()

  // 如果路由不存在, 则跳转到 404 页面
  if (to.matched.length === 0) {
    return next('/404')
  }

  // 如果不需要认证, 则继续导航
  if (!to.matched.some(record => record.meta.requiresAuth)) {
    return next(); // 使用 return 确保只调用一次 next
  }

  // 检查是否存在令牌
  if (!userStore.token) {
    Message.error('请先登录')
    // 如果没有 JWT 令牌, 则跳转到登录页面
    return next('/login') // 使用 return 确保只调用一次 next
  }

  // 如果有 JWT 令牌, 则继续导航
  next() // 只有在上述条件都不满足时才会到达这里
})

export default router
